<template>
	<view class="content">
		<!-- <scroll-view scroll-y="true" class="scH" :style="{height:heh+'px'}"> -->
		<view class="logo">

		</view>
		<view class="xuanshou-box flex-shu flex-juzhong-shu">
			<view v-for="(item,index) in xuanshouList" :key="index" class="flex-shu flex-juzhong-shu m56">
				<view class="v-bg">
					<view class="xuhao">
						{{index+1}}号
					</view>
					<video :src="item.src" controls class="v-bg-v" @play="play(index)" :id="'v'+index"></video>
				</view>


				<view class="piaoshu-box">
					<image src="../../static/toupiao/zongpiaoshu.png" class="piaoshu-pic"></image>
					<text class="zi-yanse">{{item.piao}}</text>
				</view>
				<view class="btn-team flex-heng flex-juzhong-heng">
					<view class="toupiao" @tap="toupiao(item)">
					</view>
					<view class="paihangbang" @tap="zhuli">
					</view>
				</view>
			</view>
		</view>

		<view class="shengyucishu-box">
			<text class="shengyucishu-txt">{{jihui}}</text>
		</view>
		<view class="btn-team flex-heng flex-juzhong-heng m56t">
			<view class="fanhui" @tap="fanhui">
			</view>
			<view class="guize" @tap="toupiaoguize">
			</view>
		</view>
		<view class="paihangbang1" @tap="gotopaihang">

		</view>
		<!-- </scroll-view> -->



		<!-- 确认投票弹窗 -->

	</view>
</template>

<script>
	// import utils from '@/common/common.js'
	export default {
		data() {
			return {
				xuanshouList: [],
				jihui: 0,
				heh: ''
			}
		},
		onLoad() {

		},
		onShow() {
			let info = uni.getWindowInfo()
			console.log(info)
			this.heh = info.screenHeight - 150
			if (!uni.getStorageSync('openid')) {
				uni.navigateTo({
					url: '../index/index'
				})
			}
			this.getList()
			this.updatauserinfo()
			this.jihui = uni.getStorageSync('userInfo').toupiaojihui
		},
		methods: {
			//更新个人信息
			updatauserinfo() {
				uniCloud.callFunction({
					name: 'get-userinfo',
					data: {
						openid: uni.getStorageSync('openid')
					}
				}).then(res => {
					uni.setStorageSync('userInfo', res.result.data[0])
				})
			},
			//获取选手列表
			getList() {

				uni.showLoading({
					title: 'loading',
					mask: true
				})
				uniCloud.callFunction({
					name: 'toupiaoliebiao'
				}).then(res => {
					console.log(res.result.data)
					this.xuanshouList = res.result.data

					uni.hideLoading()
				})
			},
			fanhui() {
				uni.navigateTo({
					url: '../login/login'
				})
			},
			toupiaoguize() {
				uni.showModal({
					title: '投票规则',
					content: '1.点击【直接投票】即可参与投票，点击【游戏助力】即可参与游戏，游戏成功后即可投票。\n2.同一WWID每日最多拥有1个投票名额，可投给1个选手。同一WWID整个活动周最多拥有4个游戏助力名额，每个名额可投给1个选手。\n3.投票时间：2022年10月26日00:00-11月3日23:59。\n4.投票数第一名，即总决赛冠军。\n5.最终解释权归EthiconLive鱿鱼游戏项目组所有。',
					showCancel: false,
					confirmColor: '#F54E40',

				})

			},
			toupiao(item) {
				//投票确认框
				uni.showModal({
					content: '是否为此选手\n投上您宝贵的一票',
					showCancel: true,
					confirmText: '是',
					cancelText: '否',
					success: (res) => {
						if (res.confirm) {
							//投票逻辑
							uni.showLoading({
								title: 'loading',
								mask: true
							})
							let toupiaojihui = uni.getStorageSync('userInfo').toupiaojihui
							if (toupiaojihui > 0) {
								uniCloud.callFunction({
									name: 'toupiao',
									data: {
										id: item._id,
										userid: uni.getStorageSync('openid')
									}
								}).then(res => {
									console.log('投票成功后返回', res.result.data[0])
									uni.setStorageSync('userInfo', res.result.data[0])
									this.jihui = res.result.data[0].toupiaojihui
									this.getList()
									uni.hideLoading()
									uni.showModal({
										content: '投票成功！\n谢谢您的支持！',
										showCancel: false
									})
								})
							} else {
								uni.hideLoading()
								uni.showModal({
									content: '今日投票机会已用完\n您可选择游戏助力\n或明日继续投票\n（截止时间：11月3日23:59）',
									showCancel: false,
									success: (res) => {
										if (res.confirm) {
											console.log('000000')
										}
									}
								})
								//没票了 弹窗
							}
						}
					}
				})



				console.log(item)

			},
			zhuli() {
				let youxijihui = uni.getStorageSync('userInfo').youxijihui
				console.log('剩余游戏次数', youxijihui)
				if (youxijihui > 0) {
					uni.showModal({
						content: '是否进行弹珠小游戏\n可额外获得最多4次\n投票机会',
						showCancel: true,
						cancelText: '否',
						confirmText: '是',
						success: (res) => {
							if (res.confirm) {
								this.$music.playBgm({
									mute: false
								})
								uni.navigateTo({
									url: '../game/game'
								})
							} else {

							}
						}
					})
				} else {
					uni.showModal({
						content: '4次游戏助力机会已用完\n您可明日继续投票\n \n同一WWID每天一次直接投票机会\n截止时间：11月3日23:59',
						showCancel: false
					})
				}

			},
			play(index) {
				console.log(1111)
				this.xuanshouList.forEach((item, ind) => {
					if (ind != index) {
						uni.createVideoContext('v' + ind).pause(); //执行暂停
					}
				});
			},
			gotopaihang() {
				uni.navigateTo({
					url: '../list/list'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: url('@/static/bg.jpg') no-repeat center top;
		background-size: 100% auto;
		height: 100%;
		// overflow: hidden;
		overflow-y: scroll;
		background-attachment: fixed;
	}

	.content {
		/* height: calc(100% - 60rpx);
		overflow: hidden;
		position: absolute;
		width: 710rpx;
		left: 50%;
		transform: translateX(-50%);
		top: 30rpx;
		padding: 30rpx 0;
		overflow-y: scroll;
		display: flex;
		flex-direction: column; */
	}

	uni-modal .uni-modal__bd {
		white-space: pre-wrap;
		color: #ff007f;
	}

	//toast 样式  
	/deep/uni-toast .uni-simple-toast__text {
		font-size: 30px;
	}

	// modal 样式  
	/deep/uni-modal .uni-modal__title {
		font-size: 30px;
	}

	/deep/uni-modal .uni-modal__bd {
		font-size: 30px;
		color: #ff007f !important;
	}

	/deep/uni-modal .uni-modal__ft {
		font-size: 30px;
	}

	.logo {
		width: 750rpx;
		height: 310rpx;
		background: url('@/static/toupiao/toupiao-logo.png') no-repeat center center;
		background-size: 100% 100%;
	}

	.scH {
		// height: 800rpx;
		margin-top: 30rpx;
	}

	.v-bg {
		width: 694rpx;
		height: 344rpx;
		background: url('@/static/toupiao/kuang.png') no-repeat center center;
		background-size: 100% 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.v-bg-v {
		width: 626rpx;
		height: 274rpx;
		margin-top: 14rpx;
	}

	.piaoshu-box {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 28rpx;

		.piaoshu-pic {
			width: 80rpx;
			height: 30rpx;
			background: url('@/static/toupiao/zongpiaoshu.png') no-repeat center center;
			background-size: 100% 100%;
		}

		.zi-yanse {
			color: #f9cc3d;
			font-weight: bold;
			font-size: 16px;
			line-height: 16px;
		}
	}

	.toupiao {
		width: 222rpx;
		height: 72rpx;
		background: url('@/static/toupiao/zhijietoupiao.png') no-repeat center center;
		background-size: 100% 100%;
		margin: 0 25rpx;
	}

	.paihangbang {
		width: 222rpx;
		height: 72rpx;
		background: url('@/static/toupiao/youxizhuli.png') no-repeat center center;
		background-size: 100% 100%;
		margin: 0 25rpx;
	}

	.btn-team {
		margin-top: 28rpx;
	}

	.m56 {
		margin-bottom: 56rpx;
	}

	.m56t {
		margin-top: 56rpx;
	}

	.xuhao {
		width: 108rpx;
		height: 36rpx;
		background: #dd0000;
		position: absolute;
		left: 16rpx;
		top: -20rpx;
		border: 2px solid #fff;
		font-size: 12px;
		color: #fff;
		text-align: center;
		line-height: 36rpx;
	}

	.shengyucishu-box {
		margin: 0 auto;
		width: 288rpx;
		height: 28rpx;
		background: url('@/static/toupiao/shengyu.png') no-repeat center center;
		background-size: 100% 100%;
		position: relative;

		.shengyucishu-txt {
			font-size: 16px;
			color: #f9cc3d;
			position: absolute;
			left: 80rpx;
			top: 50%;
			transform: translateY(-50%);
		}
	}

	.fanhui {
		width: 222rpx;
		height: 72rpx;
		background: url('@/static/toupiao/fanhui.png') no-repeat center center;
		background-size: 100% 100%;
		margin: 0 25rpx;
	}

	.guize {
		width: 222rpx;
		height: 72rpx;
		background: url('@/static/toupiao/toupiaoguize.png') no-repeat center center;
		background-size: 100% 100%;
		margin: 0 25rpx;
	}

	.paihangbang1 {
		width: 222rpx;
		height: 70rpx;
		background: url('@/static/toupiao/paihangbang.png') no-repeat center center;
		background-size: 100% 100%;
		margin: 0 auto;
		margin-top: 40rpx;
	}
</style>
